<template>
  <!-- 搜索组件 -->
  <view class="page">
    <view class="page__box  van-search">
      <view class="page__header  " @tap="toPop" :style="style">
        <u-icon name="search" class="page__header__icon"></u-icon>
        {{query.name?query.name:formData.keyWord}}
      </view>
    </view>
    <u-popup :show="show" mode="top" :customStyle="{height:'100%'}">
      <view style="display:flex">
        <view style="line-height:50px;padding-left:20px;">
          <u-icon name="grid" @tap="close"></u-icon>
        </view>
        <u-search v-model="query.name" :show-action="true" actionText="搜索" :animation="true" @change="onChangePop" :placeholder="formData.keyWord">
        </u-search>
      </view>
      <u-cell title="热门推荐"></u-cell>
      <view>
        <view v-for="(item, index) in formData.hotWord" :key="index" class="page__item">
          <text class="page__item--word" @tap="choose" :data-variable="item">{{item}}</text>
        </view>
      </view>
      <u-cell title="历史搜索"></u-cell>
      <view>
        <view v-for="(item, index) in historyWords" :key="index" class="page__item">
          <text class="page__item--word" @tap="choose" :data-variable="item">{{item}}</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script lang=ts>
  import {
    Component,
    Vue,
    Prop
  } from 'vue-property-decorator'

  @Component({})
  export default class SearchComp extends Vue {
    @Prop({
      type: Object
    })
    decoretionProperties: any
    style: string = ""
    formData: any = {}
    historyWords: Array < any > = []
    name: string = ""
    show: boolean = false
    query: {
      name: "",
    }
    /** 搜索范围 2商超 */
    scope: 2

    // 组件周期函数--监听组件挂载完毕
    mounted() {
      this.getFormData();
      const historyWords = uni.getStorageSync("historyWords") ?
        JSON.parse(uni.getStorageSync("historyWords")) :
        [];
      this.historyWords = historyWords
    }

    created() {
      this.getFormData();
      const historyWords = uni.getStorageSync("historyWords") ?
        JSON.parse(uni.getStorageSync("historyWords")) :
        [];
      this.historyWords = historyWords
    }

    /**
     * 动态获取样式
     */
    getListSytle(v) {
      let style = "";
      switch (v) {
        case "is-style-one":
          style =
            "background-color: #eeeeee;border: 1px solid transparent;border-radius: 44px;";
          break;
        case "is-style-two":
          style =
            "background-color: #eeeeee;border: 1px solid transparent;border-radius: 4px;";
          break;
        case "is-style-three":
          style = "border: 1px solid #eeeeee;border-radius: 44px;";
          break;
      }
      return style;
    }

    /**
     * 获取配置控件数据
     */
    getFormData() {
      const style = this.decoretionProperties.showStyle;
      this.formData = this.decoretionProperties;
      this.style = this.getListSytle(style);
      this.scope = 2;
    }

    /**
     * 搜索
     */
    onSearch() {
      const scope = this.scope;
      const name = this.query.name;
      const val = {
        name,
        scope
      };
      this.$emit("onSearch", val, {});
      this.show = false
    }

    toPop() {
      uni.navigateTo({
        url: `/subcontract/pages/Search/Search?chanel=4&formData=${JSON.stringify(
        this.formData,
      )}`,
      });
    }

    /**
     * 打开弹窗
     */
    onOpen() {
      const val = this.query.name;
      this.$emit("onSearch", val, {});
    }

    /**
     * 关闭弹窗
     */
    close() {
      this.show = false;
    }

    /**
     * 输入更新
     */
    onChangePop(e) {
      this.query.name = e;
    }

    /**
     * 发起搜索
     */
    onClick() {
      const val = this.query.name;
      this.addStoreage(val);
      this.show = false;
      this.$emit("search", val, {});
    }

    /**
     * 选择历史或热门
     */
    choose(event) {
      const val = event.currentTarget.dataset.variable;
      this.query.name = val;
    }

    /**
     * 历史记录搜索放入storeage
     */
    addStoreage(value) {
      const historyWords = uni.getStorageSync("historyWords") ?
        JSON.parse(uni.getStorageSync("historyWords")) :
        [];
      if (
        !historyWords.includes(value) &&
        value &&
        this.formData &&
        !this.formData.hotWord.includes(value)
      ) {
        historyWords.unshift(value);
      }

      if (historyWords.length > 6) {
        historyWords.pop();
      }
      this.historyWords = historyWords
      const words = JSON.stringify(historyWords);
      uni.setStorageSync("historyWords", words);
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    &__header {
      height: 36px;
      display: inline-block;
      display: flex;
      align-items: center;
      font-size: 14px;
      width: 100%;

      &__icon {
        font-size: 14px;
        margin: 0 10px;
      }
    }

    &__box {
      background: #fff;
      height: 46px;
      width: 100%;
      padding: 5px 20px;
    }

    .page__pop--search {
      color: #fff;
      font-weight: 800;
      margin-right: 10px;
      background: #fe5468;
      padding: 0 20px;
      border-radius: 20px;
    }

    .page__item {
      width: 33%;
      padding: 7px 10px;
      float: left;
      text-align: center;

      &--word {
        display: block;
        width: 80%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        border-radius: 20px;
        background: #f5f5f5;
        font-size: 14px;
        padding: 10px 10px;
        text-align: center;
      }
    }
  }
</style>